<template>
	<div>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
			<!-- <span>这是一段信息</span> -->
			<span>

				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="名字">
						<el-input v-model="form.username"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="form.password"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-input v-model="form.status"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="form.telephone"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">立即创建</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
			</span>


		</el-dialog>


		<el-button type="success" style="float: left;" @click="addUser">添加</el-button>

		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column prop="id" label="id" width="180">
			</el-table-column>
			<el-table-column prop="telephone" label="手机号" width="180">
			</el-table-column>
			<el-table-column prop="password" label="密码">
			</el-table-column>
			<el-table-column prop="status" label="状态">
			</el-table-column>

			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button type="primary" @click="upduser(scope.row)" icon="el-icon-edit" circle></el-button>
					<el-button type="danger" @click="deluser(scope.row)" icon="el-icon-delete" circle></el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>

<script>
	import qs from 'qs'
	export default {
		methods: {
			onSubmit(){
				this.$axios.post("t-user",qs.stringify(this.form)).then(r=>{
					// code 默认的是一个200 
					if(r.data.code==200){
						alert(r.data.msg);
						this.dialogVisible = false;
						// 清空form表单
						this.initable();
					}
				})
			},
			addUser() {
				// 添加表单显示
				this.dialogVisible = true;
			},
			upduser(obj) {
				this.dialogVisible = true;
				//深拷贝
			this.form = JSON.parse(	JSON.stringify(obj));
			},
			deluser(obj) {
				// 获取自己的id进行删除
				// alert(obj.id);
				this.$axios.delete(`t-user/${obj.id}`).then(r => {
					alert(r.data.code);
					// 刷新一个表格数据
					// 将下方代码封装成一个方法 
					this.initable()
				})

			},
			initable() {
				// 是哟ingaxios发出请求
				this.$axios.get("t-user").then(r => {
					// r 代表后端相应的数据
					this.tableData = r.data.t;
				})
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			}
		},
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				form:[]
			}
		},
		created() {
			// 钩子函数在生命周期直接获取函数
			this.initable()
		}
	}
</script>
